<template>
  <div class="admin-index-wrapper">

    <div class="nav">
      <div class="nav-item" :class="{'active':index===0}" :data-path="nav.path" v-for="(nav,index) in navList" :key="nav.name" @click="pushed(nav)">
        <el-icon class="nav-icon">
          <UserFilled />
        </el-icon>
        <a href="javascript:;">{{nav.name}}</a>
      </div>
    </div>

    <div class="content">
      <div class="admin-header">
        <div class="admin-header-item site-title">
          局域网IM系统后台管理系统
        </div>
        <div class="admin-header-item dropdown">
          <el-dropdown trigger="click" @command="handleCommand">
            <el-icon class="header-item-icon">
              <Grid />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <router-view />
    </div>

  </div>
</template>

<script>
export default {
  name: 'AdminIndex',
  data() {
    return {
      navList: [
        {
          name: '用户管理',
          path: '/admin/users',
          icon: ''
        }
      ]
    }
  },
  methods: {
    pushed(nav) {
      Array.from(document.getElementsByClassName('nav-item')).forEach(item => {
        if (item.dataset.path === nav.path) {
          item.classList.add('active');
        } else {
          item.classList.remove('active');
        }
      })
    },
    handleCommand(command) {
      switch (command) {
        case 'logout':
          console.log('退出登录')
          break;
      }
    }
  }
}
</script>

<style scoped>
.admin-index-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.admin-header {
  display: flex;
  justify-content: flex-start;
  padding: 0 20px;
  position: relative;
  width: 100%;
  min-height: 50px;
  max-height: 50px;
}

.admin-header .admin-header-item {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.admin-header-item.dropdown {
  position: absolute;
  right: 10px;
}

.admin-header-item.site-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

.header-item-icon {
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
}

.admin-index-wrapper .nav {
  width: 150px;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background-color: #908a8a;
}

.admin-index-wrapper .nav .nav-item {
  padding: 0 5px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #cccccc;
}

.admin-index-wrapper .nav .nav-item.active {
  background-color: #6c6c6c;
}

.admin-index-wrapper .nav .nav-item .nav-icon {
  color: #ffffff;
}

.admin-index-wrapper .nav .nav-item a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
}
</style>